<template>
  <div class="yh">
    <!-- <div class="gl">用户管理</div> -->
    <div class="select">
      <select name="" id="">
        <option value="">用户名</option>
        <option value="">证件号</option>
      </select>

      <input
        type="text"
        name=""
        id=""
        placeholder="请输入要查找的借款人名称"
        v-model="lookname"
      />
      <button class="but1" @click="excellook">查询</button>
      <button class="but2" @click="clear()">重复</button>
      <button class="but4" @click="myexport()">导出</button>
      <button class="but3"><span>+</span> 新增</button>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="借款人名称" prop="name" width="100" />
        <el-table-column label="合同编号" prop="bianhao" width="100" />
        <el-table-column label="贷款本金" prop="benji" width="100" />
        <el-table-column label="年利率(%)" prop="nll" width="80" />
        <el-table-column label="月利率(%)" prop="yll" width="80" />
        <el-table-column label="起息日" prop="qxr" width="100" />
        <el-table-column label="到期日" prop="dqr" width="180" />
        <el-table-column label="贷款月数" prop="mounth" width="60" />
        <el-table-column label="贷款天数" prop="day" width="60" />
        <el-table-column label="应收利息总额" prop="priace" width="120" />
        <el-table-column label="本月计息日" prop="jixr" width="180" />
        <el-table-column label="本月结息日" prop="jiexr" width="180" />
        <el-table-column label="本月计息天数" prop="jxday" width="80" />
        <el-table-column label="本月应收利息" prop="ysprice" width="80" />
      </el-table>
    </div>

    <!-- 新增弹窗 -->
    <el-dialog v-model="outerVisible" title="查看用户">
      <template #default>
        <div>
          借款人名称：<span>{{ list.arr.name }}</span
          ><br />
          合同编号：<span>{{ list.arr.bianhao }}</span
          ><br />
          贷款本金：<span>{{ list.arr.benji }}</span
          ><br />
          证件类型：<span>{{ list.arr.nll }}</span
          ><br />
          年利率：<span>{{ list.arr.yll }}</span
          ><br />
          月利率：<span>{{ list.arr.qxr }}</span
          ><br />
          起息日：<span>{{ list.arr.dqr }}</span
          ><br />
          到期日：<span>{{ list.arr.mounth }}</span
          ><br />
          贷款月数：<span>{{ list.arr.day }}</span
          ><br />
          贷款天数：<span>{{ list.arr.priace }}</span
          ><br />
          应收利息总额：<span>{{ list.arr.jixr }}</span
          ><br />
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="outerVisible = false">Cancel</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import service from "@/apis/index";
import * as XLSX from "xlsx";
import fs from "file-saver";


var currentPage4 = ref();
var pageSize4 = ref();
var small = ref();
var disabled = ref();
var background = ref();
var handleSizeChange = ref();
var handleCurrentChange = ref();

//导出
let myexport = () => {
  excelExport(document.querySelector(".el-table__inner-wrapper"), "lalalalala");
};
// 自动分析dom元素导出excel
var excelExport = (table: any, filename: any) => {
  // workbook,
  const wb = XLSX.utils.table_to_book(table);

  /* Export to file (start a download) */
  const defaultCellStyle = {
    font: { name: "Verdana", sz: 13, color: "FF00FF88" },
    fill: { fgColor: { rgb: "FFFFAA00" } },
  };
  const wopts: any = {
    bookType: "xlsx",
    bookSST: false,
    type: "binary",
    cellStyle: true,
    defaultCellStyle: defaultCellStyle,
    showGridLines: false,
  };
  const wbout = XLSX.write(wb, wopts);
  const blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
  fs.saveAs(blob, filename + ".xlsx");
};
var s2ab: any = (s: any) => {
  if (typeof ArrayBuffer !== "undefined") {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
    return buf;
  } else {
    const buf = new Array(s.length);
    for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
    return buf;
  }
};
//第一次渲染列表
onMounted(async () => {
  var res = await service.list.excel();
  console.log(res.data);
  tableData.value = res.data;
});
const tableData: any = ref([]);
//查找列表
let outerVisible = ref(false);
let list: any = reactive({
  arr: [],
});
let lookname = ref("");
let excellook = () => {
  outerVisible.value = true;
  tableData.value.filter((v: any) => {
    console.log(v);

    if (lookname.value == v.name) {
      list.arr = v;
    }

    // console.log(JSON.parse(JSON.stringify(list.arr))[0]);
  });
};
//清除查询框
let clear = () => {
  lookname.value = "";
};
</script>

<style scoped>
.yh .gl {
  width: 200px;
  height: 40px;
  line-height: 40px;
  border-radius: 40px;
  color: #fff;
  text-align: center;
  background-color: #409eff;
  margin-bottom: 20px;
}
.yh .select select {
  width: 100px;
  height: 30px;
  padding-left: 10px;
  border-color: #dcd6d6;
  margin: 20px 40px 20px 40px;
  background: #fdfbfb;
}
.yh .select input {
  width: 280px;
  height: 30px;
  padding-left: 20px;

  /* margin:20px 40px 20px 40px; */
  background: #fdfbfb;
  border: solid 1px #dcd6d6;
}
.yh .select .but1 {
  width: 60px;
  height: 30px;
  margin: 20px 20px 20px 40px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 10px;
}
.yh .select .but2 {
  width: 60px;
  height: 30px;
  border-radius: 10px;
  background-color: #fff;
  color: #409eff;
  border: solid 1px #dcd6d6;
}
.yh .select {
  position: relative;
}
.yh .select .but3 {
  width: 60px;
  height: 30px;
  border-radius: 10px;
  background-color: #fff;
  color: #409eff;
  border: solid 1px #dcd6d6;
  position: absolute;
  right: 40px;
}
.yh .select .but4 {
  width: 60px;
  height: 30px;
  border-radius: 10px;
  background-color: #fff;
  color: #409eff;
  border: solid 1px #dcd6d6;
  position: absolute;
  right: 120px;
}
.yh .select .but4 span img {
  width: 20px;
  height: 20px;
}
.yh .select .but3 span {
  font-size: 20px;
}
/* 分页样式 */
.el-pagination {
  margin-top: 20px;
  position: absolute;
  left: 50%;
  transform: translate(-33%, 50%);
}
.el-dialog {
  height: 600px;
}
</style>